<template>
	<view class="pro_progress">
		<view class="title" @click="()=>show = true">
			<text>{{queryTime}} · {{queryPoint}} ></text>
		</view>
		<view class="pixs" v-if="progressList.length!=0">
			<view v-for="(progress ,index) in progressList" :key="index">
				<view class="pix-box" @click="goToProgress(progress)">
					<image :src="getSrc(progress.images)" class="pix"></image>
					<view class="buttom">
						<text class="photographer">拍摄者：{{progress.photographer}}</text>
						<text class="date">{{progress.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 为空数据时候 -->
		<u-empty v-if="progressList.length== 0" text="暂无记录~" icon="/static/nodata.png" marginTop="166rpx"
			width="200rpx" height="131rpx">
		</u-empty>
		<right-popup-query :show="show" @click="query" :bottomRadios="sortRadios" :topRadios="timeRadios"
			:bottomTitle="bottomTitle"></right-popup-query>
	</view>
</template>

<script>
	import _utils from "@/common/_utils.js"
	import _public from "@/common/public.js"
	import _constant from "@/common/constant.js"
	export default {
		name: "project-progress",
		props: {
			node: Object
		},
		beforeMount() {
			this.init()
		},
		data() {
			return {
				show: false,
				bottomTitle: '分类筛选',
				queryTime: '',
				queryPoint: '',
				showPicker: false,
				timeRadios: [],
				sortRadios: [],
				progressList: []
			};
		},
		methods: {
			getSrc(ids) {
				if (typeof ids == undefined || ids == null || ids == '') {
					return
				}
				let idArray = ids.split(',')
				let id = idArray[0]
				if ((typeof id) != undefined && id != '') {
					let _src = uni.$http.baseURL + '/file/download?fileId=' + id
					return _src
				}
			},
			//初始化数据，有数据时候默认选中项目一的数据
			//获取 estateId 对应绑定的node
			async init() {
				console.log(this.node)
				console.log('init')
				this.timeRadios = _utils.backTimeArray()
				// console.log(this.timeRadios)
				let para = {}
				para.estateId = this.node.estateId
				if (this.node.type == 'public') {
					para.id = await _constant.getConstentPartId('公建芯造')
				} else {
					para.id = await _constant.getConstentPartId('房屋芯造')
				}
				const data = await _public.getSelectNode(para)
				console.log('打印房屋信息根节点')
				console.log(data)
				console.log('打印estateId')
				console.log(this.node.estateId)
				if (data.length != 0) {
					this.sortRadios = _utils.tranferNode(data);
				}

				//TODO:初始化数据
				//获取进度列表，得到数组并将每个数组的imag[0],拼接成新的图片
				let _params = {}
				this.queryTime = this.timeRadios[0].text
				this.queryPoint = this.sortRadios[0].text
				_params.queryEndTime = this.timeRadios[0].time.queryEndTime
				_params.queryStartTime = this.timeRadios[0].time.queryStartTime
				_params.rootPartId = this.sortRadios[0].rootPartId
				_params.estateId = this.node.estateId
				this.fectchProgress(_params)
			},
			async fectchProgress(params) {
				let _push_form = {}
				// _push_form.partId = params.partId
				_push_form.estateId = params.estateId
				_push_form.rootPartId = params.rootPartId
				_push_form.progressStatus = params.progressStatus
				_push_form.queryEndTime = params.queryEndTime
				_push_form.queryStartTime = params.queryStartTime
				_push_form.progressStatus = 3
				const {
					data
				} = await uni.$http.post(uni.$http.baseURL + '/progress/getProgressList', _push_form)
				if (data.status !== 0) {
					uni.$showMsg(data.message)
					this.progressList = []
				} else {
					this.progressList = data.body
				}
			},
			query(data) {
				let _params = {}
				_params.queryEndTime = data[0].time.queryEndTime
				_params.queryStartTime = data[0].time.queryStartTime
				_params.rootPartId = data[1].rootPartId
				_params.estateId = this.node.estateId
				this.queryTime = data[0].text
				this.queryPoint = data[1].text
				this.fectchProgress(_params)
				this.show = false
				console.log(data)
			},
			goToProgress(progress) {
				let item = progress
				item.title = this.queryPoint
				let _item = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: '/mainpkg/project_progress_detail/project_progress_detail?item=' + _item
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pro_progress {
		.title {
			margin-top: 20rpx;
			margin-left: 30rpx;
		}

		.pixs {
			display: flex;
			flex-wrap: wrap;

			.pix-box {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin: 30rpx 0 0 30rpx;
				background: #FFFFFF;
				width: 335rpx;
				height: 345rpx;
				border-radius: 20rpx;

				.pix {
					width: 335rpx;
					height: 335rpx;
				}

				.buttom {
					width: 335rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					padding-left: 20rpx;
					padding-bottom: 17rpx;

					.photographer {
						margin-top: 18rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.date {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}

			}
		}
	}

	.sticky {
		position: fixed;
		bottom: 60rpx;
		right: 50rpx;
		z-index: 100;

		.add-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #FFF;
			// text-align: center;
		}
	}

	.popup-content {
		width: 460rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		padding: 30rpx;
		background-color: #fff;
		border: 2rpx solid #efefef;

		.base-content {
			margin-top: 28rpx;
			padding: 20rpx;

			.taglist {
				display: flex;
				flex-flow: wrap;
				align-items: center;
				flex-direction: row;

				.tag {
					margin: 20rpx 20rpx 10rpx 0;
					// width: 120rpx;
					// border-radius: 28rpx;
					// color: #FFFFFF;
				}
			}
		}

		.btns {
			position: fixed;
			display: flex;
			flex-direction: row;
			bottom: 40rpx;
			align-items: center;
			border-radius: 20rpx;
			// border: 1rpx solid #EC4C42;

			.btn {
				width: 220rpx;
				border: 1px solid #EC4C42;
			}

			.agree {
				background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
				border-radius: 0rpx 33rpx 33rpx 0rpx;
			}

			.reset {
				border-radius: 33rpx 0rpx 0rpx 33rpx;
				color: #EC4C42;
			}
		}
	}
</style>
